<template>
	<view class="step-info">
		<view class="step-number">
			<block v-for="(item, index) in stepList" :key="index">
				<view @click.stop="openItem(item)" class="item-state">
					<view class="itemBlock" :class="[item.id == step ? 'itemBlockActive' : '']">
						<view class=" state-img ">{{ item.id }}</view>
					</view>

					<view class="step-name">
						<view
							class="name"
							:style="{ color: getColor(index) || (item.unCheckedColor || unCheckedColor) }"
						>
							{{ item.name }}
						</view>
					</view>
				</view>
				<view
					class="line"
					:style="{ background: getLine(index) || (item.unCheckedLine || unCheckedLine) }"
					v-if="index < stepList.length - 1"
				></view>
			</block>
		</view>
	</view>
</template>

<script>
import checkedImg from '@/static/images/checkedImg.png';
import unCheckedImg from '@/static/images/unCheckedImg.png';
export default {
	props: {
		//当前步骤
		step: {
			type: Number,
			default: 1
		},
		//步骤列表
		stepList: {
			type: Array,
			default: null
		},
		//已完成的图片路径
		checkedImg: {
			type: String,
			default: checkedImg
		},
		//未完成的图片路径
		unCheckedImg: {
			type: String,
			default: unCheckedImg
		},
		//已完成的字体颜色
		checkedColor: {
			type: String,
			default: '#fff'
		},
		//未完成的字体颜色
		unCheckedColor: {
			type: String,
			default: '#fff'
		},
		//已完成的线条颜色
		checkedLine: {
			type: String,
			default: '#fff'
		},
		//未完成的线条颜色
		unCheckedLine: {
			type: String,
			default: '#fff'
		}
	},
	data() {
		return {};
	},
	methods: {
		//获取图片
		getImg(e) {
			let index = Number(e);
			if (this.step > index) return this?.stepList?.[index].checkedImg || this.checkedImg;
		},
		//获取线
		getLine(e) {
			let index = Number(e);
			if (this.step > index) return this?.stepList?.[index].checkedLine || this.checkedLine;
		},
		//获取颜色
		getColor(e) {
			let index = Number(e);
			if (this.step > index) return this?.stepList?.[index].checkedColor || this.checkedColor;
		},
		openItem(item) {
			this.$emit('clickStep', item);
		}
	}
};
</script>

<style>
.step-info {
	width: 100%;
	height: auto;
}

.step-number {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.itemBlock {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	margin: auto;
	border-radius: 8px;
	justify-content: center;
}
.itemBlockActive {
	background-color: rgba(255, 255, 255, 0.2);
}
.state-img {
	width: 40rpx;
	height: 40rpx;
	display: flex;
	margin: auto;
	border-radius: 3px;
	background-color: #fff;
	justify-content: center;
	line-height: 44rpx;
	color: rgb(45, 143, 255);
}

.line {
	width: 100%;
	height: 4rpx;
	margin: 0 8rpx;
  margin-bottom: 36rpx;
}

.step-name {
	margin-top: 16rpx;
	width: 160rpx;
	align-items: center;
	justify-content: space-between;
	font-weight: bold;
	text-align: center;
}

.name {
	font-size: 24rpx;
	line-height: 24rpx;
	color: #333333;
}
</style>
